<template>
  <div class="notice">
  	<x-header :left-options="{backText: ''}">通知公告</x-header>	
  	<!--数据加载动画 start-->
		<div class="loadingBox" v-show="status == 0">
			<div class="loading">
				<div>loading..</div>
				<div></div>
				<div></div>
			</div>
		</div>
		<!--数据加载动画 end-->
  	
  	<!--数据加载完成 start-->
		<div class="loadingOver" v-show="status == 1">
			<tab>
	      <tab-item selected @on-item-click="onItemClick" class="selectBtn" :typeId="documentsID">党委文件</tab-item>
	      <tab-item @on-item-click="onItemClick" class="selectBtn" :typeId="noticeID">通知</tab-item>
	      <tab-item @on-item-click="onItemClick" class="selectBtn" :typeId="briefingID">简报</tab-item>
	   	</tab>
	   	
			<div class="listBox">
				<ul class="anounce-listContent" v-show="index == 0">
					<li class="detailList" v-for="(detailList,index) in documentsForm">
						<router-link to="" class="routerLink">
						<div class="detailList-title" v-text="detailList.XXTitle">新形势下基层信访稳定工作的“庞村经验”庞村经验庞村经验</div>
						<div class="detailList-info">
							<div class="publishTime fl">发布：<span v-text="detailList.FBTime.substr(0,10)">2017-06-22</span></div>    
							<div class="fr">点击量：<span v-text="exchangeArray(detailList.Item[0].ReadUser)">5</span></div>
							<div class="clear"></div>
						</div>
						</router-link>
						<span class="touchId" :dataId="detailList.ID"  @click="documentsDetail"></span>
					</li>
					<li class="loadMore" v-text="defaultDocumentsFormLoadingText" v-if="documentsFormLength > 8" @click="documentsFormMore"></li>
				</ul>
				<ul class="anounce-listContent" v-show="index == 1">
					<li class="detailList" v-for="(detailList,index) in noticeForm">
						<router-link to="" class="routerLink">
						<div class="detailList-title" v-text="detailList.XXTitle">新形势下基层信访稳定工作的“庞村经验”庞村经验庞村经验</div>
						<div class="detailList-info">
							<div class="publishTime fl">发布：<span v-text="detailList.FBTime.substr(0,10)">2017-06-22</span></div>    
							<div class="fr">点击量：<span v-text="exchangeArray(detailList.Item[0].ReadUser)">5</span></div>
							<div class="clear"></div>
						</div>
						</router-link>
						<span class="touchId" :dataId="detailList.ID"  @click="noticeDetail"></span>
					</li>
					<li class="loadMore" v-text="defaultNoticeFormLoadingText" v-if="noticeFormLength > 8" @click="noticeFormMore"></li>
				</ul>
				<ul class="anounce-listContent" v-show="index == 2">
					<li class="detailList" v-for="(detailList,index) in briefingForm">
						<router-link to="" class="routerLink">
						<div class="detailList-title" v-text="detailList.XXTitle">新形势下基层信访稳定工作的“庞村经验”庞村经验庞村经验</div>
						<div class="detailList-info">
							<div class="publishTime fl">发布：<span v-text="detailList.FBTime.substr(0,10)">2017-06-22</span></div>    
							<div class="fr">点击量：<span v-text="exchangeArray(detailList.Item[0].ReadUser)">5</span></div>
							<div class="clear"></div>
						</div>
						</router-link>
						<span class="touchId" :dataId="detailList.ID" @click="briefingDetail"></span>
					</li>
					<li class="loadMore" v-text="defaultBriefingFormLoadingText" v-if="briefingFormLength > 8" @click="briefingFormMore"></li>
				</ul>
			</div>
		</div>
		<!--数据加载完成 end-->
		
	</div>
</template>

<script>
/*import axios from 'axios'*/
import Api from 'assets/js/api';
import init from '../assets/js/init';
import { XHeader, Actionsheet, TransferDom } from 'vux'
import { Tab, TabItem, Sticky, Divider, XButton, Swiper, SwiperItem } from 'vux'

var api = new Api();
var documentsID;//党委文件ID
var noticeID;//通知ID
var briefingID;//简报ID
var result = localStorage.getItem('result');





export default {
  name: 'notice',
  data () {
    return {
    	documentsID:'',//党委文件ID
			noticeID:'',//通知ID
			briefingID:'',//简报ID
    	status:'0',
    	index:'0',//默认tab栏值为0
    	documentsForm:[],//接受党委文件信息
    	documentsFormLength:'',//党委文件信息条数
    	noticeForm:[],//接受通知信息
    	noticeFormLength:'',//通知信息条数
    	briefingForm:[],//接受简报信息
    	briefingFormLength:'',//简报信息条数
    	defaultDocumentsFormLoadingText:'点击加载更多',
    	defaultNoticeFormLoadingText:'点击加载更多',
    	defaultBriefingFormLoadingText:'点击加载更多',
    	documentsFormPage:1,//初始默认documentsForm为加载第一页，往后每点击一次加载更多则增加一页
    	noticeFormPage:1,//初始默认noticeForm为加载第一页，往后每点击一次加载更多则增加一页
    	briefingFormPage:1,//初始默认briefingForm为加载第一页，往后每点击一次加载更多则增加一页
    	loadingListId:'',
    }
  },
  created(){
  	var self = this;
  	var selectBtnGroup = document.querySelectorAll('.selectBtn');
		//获取ID类别
		api.post(api.url.notice, {
			Action: 'XXFB_GETXXFBTYPELIST',
			szhlcode: result
		}).then((response) => {
			console.log(response);
			documentsID = self.documentsID = response.data.Result[0].Id;//党委文件ID
			noticeID = self.noticeID = response.data.Result[2].Id;//通知ID
			briefingID = self.briefingID = response.data.Result[1].Id;//简报ID
			for(var i = 0; i < selectBtnGroup.length; i++){
			if(selectBtnGroup[i].classList.contains('vux-tab-selected')){
					self.loadingListId = selectBtnGroup[i].getAttribute('typeId');
					console.log(selectBtnGroup[i].getAttribute('typeId'));		
				}
			}
			//默认渲染党委文件ID一系列的信息
			api.post(api.url.index, {
				Action: 'XXFB_GETXXFBLISTBYAPP',
				p: 1,
				pagecount: 8,
				type: 1,
				P2 : self.loadingListId,
				szhlcode: result
			}).then((result) => {
				console.log(result.data.Result)
				self.documentsForm = result.data.Result;
				self.documentsFormLength = result.data.Result1;
				self.noticeForm = result.data.Result;
				self.noticeFormLength = result.data.Result1;
				self.briefingForm = result.data.Result;
				self.briefingFormLength = result.data.Result1;
				this.status = 1;
				console.log(self.documentsForm)
			}).catch((error) => {
				console.log(error);
			});
		}).catch((error) => {
			console.log(error);
		});
  },
  activated(){
  	var self = this;
  	var selectBtnGroup = document.querySelectorAll('.selectBtn');
		//获取ID类别
		api.post(api.url.notice, {
			Action: 'XXFB_GETXXFBTYPELIST',
			szhlcode: result
		}).then((response) => {
			console.log(response);
			documentsID = self.documentsID = response.data.Result[0].Id;//党委文件ID
			noticeID = self.noticeID = response.data.Result[2].Id;//通知ID
			briefingID = self.briefingID = response.data.Result[1].Id;//简报ID
			for(var i = 0; i < selectBtnGroup.length; i++){
			if(selectBtnGroup[i].classList.contains('vux-tab-selected')){
					self.loadingListId = selectBtnGroup[i].getAttribute('typeId');
					console.log(selectBtnGroup[i].getAttribute('typeId'));		
				}
			}
			//默认渲染党委文件ID一系列的信息
			api.post(api.url.index, {
				Action: 'XXFB_GETXXFBLISTBYAPP',
				p: 1,
				pagecount: 8,
				type: 1,
				P2 : self.loadingListId,
				szhlcode: result
			}).then((result) => {
				console.log(result.data.Result)
				self.documentsForm = result.data.Result;
				self.documentsFormLength = result.data.Result1;
				self.noticeForm = result.data.Result;
				self.noticeFormLength = result.data.Result1;
				self.briefingForm = result.data.Result;
				self.briefingFormLength = result.data.Result1;
				this.status = 1;
				console.log(self.documentsForm)
			}).catch((error) => {
				console.log(error);
			});
		}).catch((error) => {
			console.log(error);
		});
  },
  methods:{
  	onItemClick (index) {
  		var self = this;
      this.index = index;
      //获取党委文件信息
      if(this.index == 0){
      	/*if(self.documentsForm.length == 0){*/
					api.get(api.url.index,{ 
						params:{
							Action: 'XXFB_GETXXFBLISTBYAPP',
							p: 1,
							pagecount: 8,
							type: 1,
							P2 : documentsID,
							szhlcode: result
						}
					}).then(result=>{ 
						console.log(result)
						self.documentsForm = result.data.Result;
						self.documentsFormLength = result.data.Result1;
					}).catch(err=>{ 
						console.log(err) 
					})
      	/*}*/
      }
      //获取通知信息
      if(this.index == 1){
      	/*if(self.noticeForm.length == 0){*/
      		self.status = 0;
					api.get(api.url.index,{ 
						params:{
							Action: 'XXFB_GETXXFBLISTBYAPP',
							p: 1,
							pagecount: 8,
							type: 1,
							P2 : noticeID,
							szhlcode: result
						}
					}).then(result=>{ 
						console.log(result)
						self.noticeForm = result.data.Result;
						self.noticeFormLength = result.data.Result1;
						self.status = 1;
					}).catch(err=>{ 
						console.log(err) 
					})
      	/*}*/
      }
      //获取简报信息
      if(this.index == 2){
      	/*if(self.briefingForm.length == 0){*/
      		self.status = 0;
					api.get(api.url.index,{ 
						params:{
							Action: 'XXFB_GETXXFBLISTBYAPP',
							p: 1,
							pagecount: 8,
							type: 1,
							P2 : briefingID,
							szhlcode: result
						}
					}).then(result=>{ 
						console.log(result)
						self.briefingForm = result.data.Result;
						self.briefingFormLength = result.data.Result1;
						self.status = 1;
					}).catch(err=>{ 
						console.log(err) 
					})
      	/*}*/
      }
    },
    exchangeArray(val) {
			var Array = val.split(",");
			return Array.length;
		},
		documentsFormMore(){
			this.documentsFormPage += 1;
			var self = this;
			this.defaultDocumentsFormLoadingText = '正在加载中···';
			if(this.index == 0){
				api.get(api.url.index,{ 
					params:{
						Action: 'XXFB_GETXXFBLISTBYAPP',
						p: self.documentsFormPage,
						pagecount: (self.documentsFormLength - self.documentsFormPage*8) > 0 ? 8 : 8 - Math.abs(self.documentsFormLength - self.documentsFormPage*8),
						type: 1,
						P2 : documentsID,
						szhlcode: result
					}
				}).then(result=>{ 
					console.log(result)
					self.documentsForm = self.documentsForm.concat(result.data.Result);
					this.defaultDocumentsFormLoadingText = '点击加载更多';
				}).catch(err=>{ 
					console.log(error);
					this.defaultDocumentsFormLoadingText = '点击加载更多';
				})
      }
			if(this.documentsForm.length == this.documentsFormLength){
				this.defaultDocumentsFormLoadingText = '信息已经更新为最新的了！';
			}
		},
		noticeFormMore(){
			this.noticeFormPage += 1;
			var self = this;
			this.defaultNoticeFormLoadingText = '正在加载中···';
			if(this.index == 1){
				api.get(api.url.index,{ 
					params:{
						Action: 'XXFB_GETXXFBLISTBYAPP',
						p: self.noticeFormPage,
						pagecount:  (self.noticeFormLength - self.noticeFormPage*8) > 0 ? 8 : 8 - Math.abs(self.noticeFormLength - self.noticeFormPage*8),
						type: 1,
						P2 : noticeID,
						szhlcode: result
					}
				}).then(result=>{ 
					console.log(result);
					self.noticeForm = self.noticeForm.concat(result.data.Result);
					this.defaultNoticeFormLoadingText = '点击加载更多';
				}).catch(err=>{ 
					console.log(err);
					this.defaultNoticeFormLoadingText = '点击加载更多';
				})
      }
			if(this.noticeForm.length == this.noticeFormLength){
				this.defaultNoticeFormLoadingText = '信息已经更新为最新的了！';
			}
		},
		briefingFormMore(){
			this.briefingFormPage += 1;
			var self = this;
			this.defaultBriefingFormLoadingText = '正在加载中···';
			if(this.index == 2){
				api.get(api.url.index,{ 
					params:{
						Action: 'XXFB_GETXXFBLISTBYAPP',
						p: self.briefingFormPage,
						pagecount: (self.briefingFormLength - self.briefingFormPage*8) > 0 ? 8 : 8 - Math.abs(self.briefingFormLength - self.briefingFormPage*8),
						type: 1,
						P2 : briefingID,
						szhlcode: result
					}
				}).then(result=>{ 
					console.log(result)
					self.briefingForm = self.briefingForm.concat(result.data.Result);
					this.defaultBriefingFormLoadingText = '点击加载更多';
				}).catch(err=>{ 
					console.log(err) 
					this.defaultBriefingFormLoadingText = '点击加载更多';
				});
      }
			if(this.briefingForm.length >= this.briefingFormLength){
				this.defaultBriefingFormLoadingText = '信息已经更新为最新的了！';
			}
		},
		documentsDetail(){
			localStorage.removeItem("documentsDetailTitle");
			localStorage.removeItem("documentsDetailInfo");
			var self = this;
			var dataId = event.target.getAttribute('dataId');
			var documentsDetailTitle;
			var documentsDetailInfo;
			for(var i = 0;i < self.documentsForm.length; i++){
				if(parseInt(dataId) == self.documentsForm[i].ID){
					self.detailTitle = self.documentsForm[i].XXTitle;
					var firstExchange = api.firstExchange(self.documentsForm[i].Item[0].XXContent);
					self.detailInfo = api.secondExchange(firstExchange);
					documentsDetailTitle = self.detailTitle;
					documentsDetailInfo = self.detailInfo;
				}
			}
			//点击次数增加请求
			api.post(api.url.index, {
				Action: 'XXFB_UPDATEXXFBREADUSER',
				szhlcode: result,
				P1 :dataId
			}).then((response) => {
				console.log(dataId);
				console.log(response);
				localStorage.setItem("documentsDetailTitle",documentsDetailTitle);
				localStorage.setItem("documentsDetailInfo",documentsDetailInfo);
				self.$router.push('/partyCommitteeDetail');
			}).catch((error) => {
				console.log(error);
			});
			
		},
		noticeDetail(){
			localStorage.removeItem("informDetailInfoTitle");
			localStorage.removeItem("informDetailInfoInfo");
			var self = this;
			var dataId = event.target.getAttribute('dataId');
			var informDetailInfoTitle;
			var informDetailInfoInfo;
			for(var i = 0;i < self.noticeForm.length; i++){
				if(parseInt(dataId) == self.noticeForm[i].ID){
					self.detailTitle = self.noticeForm[i].XXTitle;
					var firstExchange = api.firstExchange(self.noticeForm[i].Item[0].XXContent);
					self.detailInfo = api.secondExchange(firstExchange);
					informDetailInfoTitle = self.detailTitle;
					informDetailInfoInfo = self.detailInfo;
				}
			}
			//点击次数增加请求
			api.post(api.url.index, {
				Action: 'XXFB_UPDATEXXFBREADUSER',
				szhlcode: result,
				P1 :dataId
			}).then((response) => {
				console.log(dataId);
				console.log(response);
				localStorage.setItem("informDetailInfoTitle",informDetailInfoTitle);
				localStorage.setItem("informDetailInfoInfo",informDetailInfoInfo);
				self.$router.push('/informDetail');
			}).catch((error) => {
				console.log(error);
			});
			
		},
		briefingDetail(){
			localStorage.removeItem("briefingDetailTitle");
			localStorage.removeItem("briefingDetailInfo");
			var self = this;
			var dataId = event.target.getAttribute('dataId');
			var briefingDetailTitle;
			var briefingDetailInfo;
			for(var i = 0;i < self.briefingForm.length; i++){
				if(parseInt(dataId) == self.briefingForm[i].ID){
					self.detailTitle = self.briefingForm[i].XXTitle;
					var firstExchange = api.firstExchange(self.briefingForm[i].Item[0].XXContent);
					self.detailInfo = api.secondExchange(firstExchange);
					briefingDetailTitle = self.detailTitle;
					briefingDetailInfo = self.detailInfo;
				}
			}
			//点击次数增加请求
			api.post(api.url.index, {
				Action: 'XXFB_UPDATEXXFBREADUSER',
				szhlcode: result,
				P1 :dataId
			}).then((response) => {
				console.log(dataId);
				console.log(response);
				localStorage.setItem("briefingDetailTitle",briefingDetailTitle);
				localStorage.setItem("briefingDetailInfo",briefingDetailInfo);
				self.$router.push('/briefingDetail');
			}).catch((error) => {
				console.log(error);
			});
			
		},
		viewDetailClose(){
			this.viewDetailStatus = false;
		}
  },
  components:{
  	XHeader,
    Actionsheet,
    Tab,
    TabItem,
    Sticky,
    Divider,
    XButton,
    Swiper,
    SwiperItem
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	@import url("../assets/css/common.css");
	.notice{
		width: 100%;
		height: 100%;
	}
	.vux-header{
		background-color: #f00 !important;
		position: fixed !important;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2000;
	}
	.vux-header .vux-header-left{
		color: #fff;
	}
	.vux-tab{
		padding-top: 40px;
	}
	.vux-tab .vux-tab-item.vux-tab-selected{
		color: #f00 !important;
    border-bottom: 3px solid #f00 !important;
	}
	.vux-tab-ink-bar{
		background-color: #f00 !important;	
	}
	
	.vux-header .vux-header-left .left-arrow:before{
		border: 2px solid #fff !important;
    border-width: 2px 0 0 2px !important;
	}
	
	.listBox{
		width: 100%;
		box-sizing: border-box;
		padding-left: 0.5rem;
		margin-top: 0.5rem;
		background-color: #fff;
		border-top: 1px solid transparent;
	}
	.anounce-listContent{
		width: 100%;
		box-sizing: border-box;
	}
	.detailList{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding-right: 0.5rem;
		border-bottom: 1px solid #e9e9e9;
		position: relative;
	}
	
	.detailList .touchId{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	.detailList-title{
		width: 100%;
		font-size: 0.7rem;
		color: #333;
		white-space:nowrap; 
		overflow:hidden; 
		text-overflow:ellipsis;
		margin-top: 0.3rem;
	}
	.detailList-info{
		width: 100%;
		font-size: 0.5rem;
		color: #999;
		white-space:nowrap; 
		overflow:hidden; 
		text-overflow:ellipsis;
		margin-top: 0.1rem;
		margin-bottom: 0.3rem;
	}
	.publishTime {
		margin-right: 0.5rem;
	}
	.routerLink{
		display: block;
	}
	.loadMore{
		width: 100%;
		height: 2rem;
		line-height: 2rem;
		text-align: center;
		font-size: 0.7rem;
		box-sizing: border-box;
		padding-right: 0.5rem;
	}
	
	/*查看信息详情*/
	.viewDetail{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2001;
		background-color: rgba(0,0,0,0.5);
		box-sizing: border-box;
		padding: 1rem 1rem 4rem 1rem;
	}
	.viewDetailContent{
		width: 100%;
		height: 100%;
		background-color: #fff;
		box-sizing: border-box;
		padding: 0.5rem;
		text-align: center;
	}
	.viewDetailContent-title{
		width: 100%;
		font-size: 0.8rem;
		color: #333;
		text-align: center;
		margin-bottom: 0.5rem;
	}
	.viewDetailContent-info{
		width: 100%;
		height: 88%;
		font-size: 0.5rem !important;
		color: #666;
		text-align: left;
		/*text-indent: 1rem;*/
		line-height: 0.8rem;
		display:block;
		word-break: break-all;
		word-wrap: break-word;
		overflow-y: scroll;
	}
	.viewDetailContent-info p{
		line-height: 1rem !important;
	}
	.viewDetailContent-info p span{
		font-size: 0.5rem !important;
	}
	
	.viewDetailContent-info img{
		max-width: 100% !important;
    	width: initial !important;
    	height: initial !important;
	}
	.viewDetailContent-info table{
		width: initial !important;
		max-width: 100% !important;
	}
	.viewDetailClose{
		position: fixed;
		bottom: 2rem;
		left: 50%;
		margin-left: -0.75rem;
		font-size: 1.5rem;
		color: #fff;
		z-index: 2002;
	}
	
	/*加载动画*/
	.loadingBox{
		width: 100%;
		height: 100%;
		display: flex;
		display: -webkit-flex;
		flex-direction: column;
		-webkit-flex-direction: column;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
	}
	.loading {
	    border-radius: 50%;
	    font-size: 20px;
	    height: 100px;
	    line-height: 90px;
	    position: relative;
	    text-align: center;
	    width: 100px;
	}
	.loading > div:nth-child(2) {
	    border-color: #FFF;
	    left: 0px;
	    width: 90px;
	}
	.loading > div:nth-child(3) {
	    border-color: #009933;
	    left: -5px;
	    width: 100px;
	    -webkit-animation-delay: 0.5s;
	    -moz-animation-delay: 0.5s;
	    -ms-animation-delay: 0.5s;
	    -o-animation-delay: 0.5s;
	    animation-delay: 0.5s;
	}
	.loading > div:nth-child(2), .loading > div:nth-child(3) {
	    background-color: rgba(255, 255, 255, 0.2);
	    border: 5px solid #FFF;
	    border-radius: 50%;
	    box-shadow: 0 0 5px 0 #f00;
	    height: 100px;
	    position: absolute;
	    top: 0px;
	    border-top-width: 0;
	    border-bottom-width: 0;
	    -webkit-animation: anim3 2s linear infinite;
	    -moz-animation: anim3 2s linear infinite;
	    -ms-animation: anim3 2s linear infinite;
	    -o-animation: anim3 2s linear infinite;
	    animation: anim3 2s linear infinite;
	}
	@keyframes anim3{
		0% {
		    transform: rotateY(0deg);
		}
		50% {
		    transform: rotateY(180deg);
		}
		100% {
		    transform: rotateY(360deg);
		}
	}
</style>
